<template>
  <section class="py-16 md:py-20 bg-primary relative overflow-hidden">
    <!-- 装饰元素 - 浮动动画 -->
    <div class="absolute top-0 left-0 w-full h-full opacity-10">
      <div class="absolute top-10 left-10 w-40 h-40 rounded-full bg-white animate-float"></div>
      <div
        class="absolute bottom-10 right-10 w-60 h-60 rounded-full bg-white animate-float animation-delay-1000"
      ></div>
      <div
        class="absolute top-1/2 left-1/3 w-20 h-20 rounded-full bg-white animate-float animation-delay-2000"
      ></div>
    </div>

    <div class="container mx-auto px-4 relative z-10">
      <!-- 订阅区域 - 滚动动画 -->
      <div class="max-w-3xl mx-auto text-center text-white scroll-animate">
        <h2 class="text-[clamp(1.5rem,3vw,2.2rem)] font-bold mb-4">订阅拍卖资讯</h2>
        <p class="text-white/80 mb-8">第一时间获取最新拍卖专场信息、拍品预览和行业动态</p>

        <!-- 表单 - 带焦点动画 -->
        <div class="flex flex-col sm:flex-row gap-3 max-w-lg mx-auto">
          <input
            type="email"
            v-model="email"
            placeholder="请输入您的邮箱地址"
            class="flex-1 px-5 py-3 rounded-md focus:outline-none focus:ring-2 focus:ring-white/50 text-dark transition-all duration-300 transform focus:scale-[1.02]"
          />
          <button
            class="bg-white text-primary hover:bg-white/90 font-medium px-6 py-3 rounded-md transition-all duration-300 transform hover:scale-105 whitespace-nowrap"
            @click="subscribe"
          >
            立即订阅
          </button>
        </div>
        <p class="text-white/60 text-sm mt-4">我们尊重您的隐私，不会向第三方泄露您的信息</p>
      </div>
    </div>
  </section>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

// 响应式数据
const email = ref('')

// 订阅方法
const subscribe = () => {
  if (!email.value) {
    ElMessage({
      message: '请输入邮箱地址',
      type: 'warning',
    })
    return
  }

  // 简单邮箱验证
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
  if (!emailRegex.test(email.value)) {
    ElMessage({
      message: '请输入有效的邮箱地址',
      type: 'warning',
    })
    return
  }

  // 模拟订阅成功，带成功动画效果
  const subscribeBtn = document.querySelector('button')
  const originalText = subscribeBtn.innerText

  subscribeBtn.disabled = true
  subscribeBtn.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i> 订阅中...'

  setTimeout(() => {
    ElMessage({
      message: '订阅成功，将为您推送最新拍卖资讯',
      type: 'success',
    })
    email.value = ''
    subscribeBtn.disabled = false
    subscribeBtn.innerText = originalText
  }, 1500)
}

// 滚动动画观察器
const setupScrollAnimations = () => {
  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          entry.target.classList.add('animate-in')
          observer.unobserve(entry.target)
        }
      })
    },
    { threshold: 0.1 }
  )

  document.querySelectorAll('.scroll-animate').forEach((el) => {
    observer.observe(el)
  })
}

onMounted(() => {
  setupScrollAnimations()
})
</script>

<style scoped>
.bg-primary {
  background-color: #1a365d;
}
/* 滚动动画 */
.scroll-animate {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.scroll-animate.animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* 浮动动画 */
@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

.animation-delay-1000 {
  animation-delay: 1s;
}

.animation-delay-2000 {
  animation-delay: 2s;
}
</style>
